<template>
  <div class="play_box">
    <video-player class="video-player-box"
                  ref="videoPlayer"
                  :options="playerOptions"
                  :playsinline="true"
                  customEventName="customstatechangedeventname"

                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)"
                  @statechanged="playerStateChanged($event)"
                  @ready="playerReadied">
    </video-player>
  </div>
</template>
<style lang="scss">
  .play_box{
    width: 100%;
    background: red;
    .video-player-box{
      width: 100%;
    }
    .video-js{
      width: 375px;
    }
  }
  #vjs_video_3{
    width: 100%;
  }
  .vjs-poster{
    width: 100%;
    background-size: 100px;
  }
</style>
<script>
  import {videoPlayer} from 'vue-video-player'

  export default {
    name: 'Content6',
    data() {
      return {
        playerOptions: {
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: 'video/mp4',
            src: "http://jq22com.qiniudn.com/jq22-sp.mp4"
          }],
          poster: '../../../static/images/play.jpg'
        }
      }
    },
    mounted() {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      onPlayerPlay(player) {
      },
      onPlayerPause(player) {
      },

      playerStateChanged(playerCurrentState) {

      },

      playerReadied(player) {
        console.log('the player is readied', player)
      }
    },
    component: {
      videoPlayer
    }
  }
</script>
